<template>
  <!-- 3.组件使用 -->
  <!-- 通过props向子组件传递数据 -->
  <!-- 监听子组件的事件：@ + 子组件自定义的事件名 -->
  <MyHeader :content="news" @sendToParent="getChildEvent"></MyHeader>
  <div style="border: 1px solid red">
    这是父组件
    <br />
    从子组件拿到的值：{{ childMsg }}
  </div>
</template>

<script>
// 1.组件引入
import MyHeader from "./components/demo_header.vue";

export default {
  name: "App",
  data() {
    return {
      news: {
        title: "解放军抵近台湾海岸线，现场曝光",
        content:
          "8月5日,中国人民解放军东部战区按计划,继续在台岛北部、西南、东部海空域进行实战化联合演训.",
      },
      childMsg: "",
    };
  },
  // 2.组件声明
  components: {
    MyHeader,
  },
  methods: {
    getChildEvent(val) {
      this.childMsg = val;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>
